<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户管理 - 后台管理</title>
    <link rel="stylesheet" href="/static/base.css">
    <link rel="stylesheet" href="/static/components.css">
    <link rel="stylesheet" href="/static/pages.css">
    <link rel="stylesheet" href="/static/admin/admin.css">
</head>
<body>
  <div class="admin-layout">
    <!-- 顶部导航 -->
    <div class="admin-header">
      <h2>账户管理</h2>
      <div>
        <button class="btn" onclick="location.href='/'">返回前台</button>
        <button class="btn" onclick="logout()">退出</button>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="admin-main">
      <!-- 左侧导航（公共组件注入） -->
      <div class="admin-sidebar"></div>

      <!-- 右侧内容区域 -->
      <div class="admin-content">
        <div class="content-page active">
          <h3>账户管理概览</h3>
          <p class="page-description">管理系统用户账户和登录记录</p>

          <!-- 快速导航卡片 -->
          <div class="menu-grid">
            <div class="menu-card" onclick="location.href='/admin/user/user-management'">
              <div class="menu-icon">👤</div>
              <div class="menu-title">用户管理</div>
              <div class="menu-description">
                管理系统用户账户，包括用户的创建、编辑、删除等操作。
                支持按昵称和手机号搜索，提供完整的用户信息管理功能。
              </div>
              <div class="menu-actions">
                <button class="btn btn-primary" onclick="event.stopPropagation(); location.href='/admin/user/user-management'">进入管理</button>
              </div>
            </div>
            
            <div class="menu-card" onclick="location.href='/admin/user/login-records'">
              <div class="menu-icon">📊</div>
              <div class="menu-title">登录记录</div>
              <div class="menu-description">
                查看用户登录和退出记录，包括登录时间、IP地址、用户代理等信息。
                提供详细的登录统计和搜索功能。
              </div>
              <div class="menu-actions">
                <button class="btn btn-primary" onclick="event.stopPropagation(); location.href='/admin/user/login-records'">查看记录</button>
              </div>
            </div>
          </div>

          <!-- 数据统计面板 -->
          <div class="stats-section">
            <div class="stats-header">
              <h4>系统概览</h4>
              <button class="btn btn-sm" onclick="loadStats()">刷新数据</button>
            </div>
            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-number" id="totalUsers">-</div>
                <div class="stat-label">总用户数</div>
                <div class="stat-trend">📈 持续增长</div>
              </div>
              <div class="stat-item">
                <div class="stat-number" id="todayLogins">-</div>
                <div class="stat-label">今日登录</div>
                <div class="stat-trend">🕐 实时更新</div>
              </div>
              <div class="stat-item">
                <div class="stat-number" id="activeUsers">-</div>
                <div class="stat-label">活跃用户</div>
                <div class="stat-trend">📅 近7天</div>
              </div>
              <div class="stat-item">
                <div class="stat-number" id="onlineUsers">-</div>
                <div class="stat-label">在线用户</div>
                <div class="stat-trend">🟢 实时在线</div>
              </div>
            </div>
          </div>

          <!-- 快速操作区域 -->
          <div class="quick-actions">
            <h4>快速操作</h4>
            <div class="action-buttons">
              <button class="btn btn-primary" onclick="location.href='/admin/user/user-management'">
                <span class="action-icon">➕</span>
                添加用户
              </button>
              <button class="btn btn-secondary" onclick="location.href='/admin/user/login-records'">
                <span class="action-icon">📋</span>
                查看记录
              </button>
              <button class="btn btn-secondary" onclick="loadStats()">
                <span class="action-icon">🔄</span>
                刷新统计
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      margin-bottom: 20px;
    }
    
    .menu-card {
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      text-align: center;
      transition: transform 0.3s, box-shadow 0.3s;
      cursor: pointer;
    }
    
    .menu-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .menu-icon {
      font-size: 48px;
      margin-bottom: 20px;
      color: #3498db;
    }
    
    .menu-title {
      font-size: 20px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 10px;
    }
    
    .menu-description {
      color: #6c757d;
      font-size: 14px;
      line-height: 1.5;
    }
    
    .stats-section {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .stats-section h4 {
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 20px;
    }
    
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }
    
    .stat-item {
      text-align: center;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
    }
    
    .stat-number {
      font-size: 32px;
      font-weight: bold;
      color: #3498db;
      margin-bottom: 8px;
    }
    
    .stat-label {
      color: #6c757d;
      font-size: 14px;
    }
    
    .stats-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .btn-sm {
      padding: 6px 12px;
      font-size: 12px;
    }
    
    .stat-trend {
      font-size: 12px;
      color: #28a745;
      margin-top: 5px;
    }
    
    .menu-actions {
      margin-top: 20px;
    }
    
    .quick-actions {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      margin-top: 20px;
    }
    
    .quick-actions h4 {
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 15px;
    }
    
    .action-buttons {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }
    
    .action-icon {
      margin-right: 8px;
    }
    
    .btn-secondary {
      background: #6c757d;
      color: white;
    }
    
    .btn-secondary:hover {
      background: #5a6268;
    }
  </style>

  <script src="/static/admin/components/sidebar.js"></script>
  <script>
    // 加载统计数据
    async function loadStats() {
      try {
        const response = await fetch('/admin/api/user/overview-stats');
        const data = await response.json();
        
        document.getElementById('totalUsers').textContent = data.totalUsers || 0;
        document.getElementById('todayLogins').textContent = data.todayLogins || 0;
        document.getElementById('activeUsers').textContent = data.activeUsers || 0;
        document.getElementById('onlineUsers').textContent = data.onlineUsers || 0;
      } catch (error) {
        console.error('加载统计数据失败:', error);
      }
    }
    
    // 退出登录
    async function logout() {
      try {
        await fetch('/admin/logout', { method: 'POST' });
        location.href = '/admin/login';
      } catch (e) {
        location.href = '/admin/login';
      }
    }
    
    // 页面加载时获取统计数据并注入侧边栏
    document.addEventListener('DOMContentLoaded', () => { 
      loadStats();
      injectAdminSidebar('/admin/user');
    });
  </script>
</body>
</html>
